<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>帖子详情</title>
    <link rel="stylesheet" href="css/index.css">


    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
    <link rel="stylesheet" href="css/post.css">

    <meta name="robots" content="noindex">

    <link rel="shortcut icon" type="image/x-icon"
          href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    <link rel="mask-icon"
          href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
          color="#111">
    <link rel="canonical" href="https://codepen.io/alphardex/pen/OJNLyOv">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.0/dist/aqua.min.css">


    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>


  </head>
  <body>
    <div>
      <!--导航栏开始-->
      <myheader></myheader>
      <!--导航栏结束-->

      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-6">
          <div class="post">
            <div id="onePostApp">
              <h1 class="postTitle">
                <a id="cb_post_title_url" class="postTitle2 vertical-middle" href="">
                  <span>{{post.title}}</span>
                </a>
              </h1>
              {{post.content}}
              <footer class="post-item-foot">
                <a href="" class="post-item-author"><span
                     style="font-size: 18px" v-text="post.nickname">费弗里</span></a>
                <span class="post-meta-item">
                    <span style="font-size: 18px" v-text="post.duration">2021-10-27 18:15</span>
                </span>
                <a id="digg_control_15472342">
                            <span style="padding-top: 5px" class="resize">
                                <i style="" class="glyphicon glyphicon-thumbs-up"></i>
                              {{post.likenum}}
                            </span>
                </a>
                <a>
                  <span style="padding-top: 5px" class="resize"><i class="glyphicon glyphicon-comment"></i>{{post.commentnum}}</span>
                </a>
                <a>
                  <span style="padding-top: 5px" class="resize"><i class="glyphicon glyphicon-eye-open"></i>{{post.viewnum}}</span>
                </a>
                <a>
                  <span style="padding-top: 5px" class="resize"><i
                       class="glyphicon glyphicon glyphicon-folder-open"></i>{{post.collectionnum}}</span>
                </a>
              </footer>
            </div>


            <div id="app">
              <hr>
              <h2>相关评论</h2>
              <div v-for="comment in arr">
                <h4>{{comment.author}}说:{{comment.content}}</h4>
                <p>发布于:{{comment.created}}</p>
                <hr>
              </div>

              <form>
                        <textarea class="comment-content open"
                                  name="comment_content"
                                  id="comment_content"
                                  placeholder="写点啥..."
                                  maxlength="1000"></textarea>
                <input type="submit" class="btn btn-sm btn-comment" value="发表评论">
              </form>
            </div>

          </div>
        </div>


        <div class="col-md-1">
        </div>


        <div class="col-md-3">



          <div>
            <h3>浏览最多</h3>
            <table border="1">
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
            </table>
          </div>
          <div>
            <h3>最受欢迎</h3>
            <table border="1">
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
              <tr>
                <th>作者</th>
                <th>标题</th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
    <script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-8fb756a1-e4d0-ab75-2d33-78e2d5e46416"
            crossorigin=""></script>
    <script src="js/utils.js"></script>
    <script src="js/one_post.js"></script>
    <script src="js/index_myhead.js"></script>

  </body>
</html>